/*
 * @Description: flex盒子样式
 * @Author: linpan(45650368@qq.com)
 * @Date: 2022-11-23 11:08:26
 * @LastEditors: vusui 45650368@qq.com
 * @LastEditTime: 2023-09-22 16:03:17
 * @WebSite: https://vusui.com
 * @Copyright: 2017-present The Vusui Authors
 * @Readme: 开源不易，且用且珍惜！
 */
@use "sass:math";

#{$v}box {
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;

  &.nowrap {
    flex-wrap: nowrap;
  }
  &.wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  &.row-reverse {
    flex-direction: row-reverse;
  }
  &.column {
    flex-direction: column;
  }
  &.column-reverse {
    flex-direction: column-reverse;
  }
  &.justify-start {
    justify-content: flex-start;
  }
  &.justify-end {
    justify-content: flex-end;
  }
  &.justify-center {
    justify-content: center;
  }
  &.justify-between {
    justify-content: space-between;
  }
  &.justify-around {
    justify-content: space-around;
  }
  &.items-start {
    align-items: flex-start;
    align-content: flex-start;
  }
  &.items-end {
    align-items: flex-end;
    align-content: flex-end;
  }
  &.items-center {
    align-items: center;
    align-content: center;
  }
}

// 不缩小适应
#{$v}flex-shrink {
  flex-shrink: 0;
}

#{$v}col,
#{$v}flex {
  width: 100%;
  min-height: 1rpx;
  position: relative;
  box-sizing: border-box;
}

#{$v}col,
#{$v}flex {
  max-width: 100%;
  flex-basis: 0;
  flex-grow: 1;

  &-auto {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }
}

// flex
@for $i from 1 through 12 {
  #{$v}col-#{$i} {
    max-width: math.div(100%, 12) * $i;
    flex: 0 0 math.div(100%, 12) * $i;
  }
  #{$v}flex-#{$i} {
    max-width: math.div(100%, $i);
    flex: 0 0 math.div(100%, $i);
  }
}

// 列偏移
@for $i from 1 through 11 {
  #{$v}offset-#{$i} {
    margin-left: math.div(100%, 12) * $i;
  }
}

// 间隔
#{$v}box {
  @for $i from 1 through 20 {
    // 左右间隔
    &.lr-#{$i} {
      margin-left: -#{$i * 2}rpx;
      margin-right: -#{$i * 2}rpx;
      #{$v}col,
      #{$v}flex {
        padding-left: #{$i * 2}rpx;
        padding-right: #{$i * 2}rpx;
      }
    }
    // 上下间隔
    &.tb-#{$i} {
      margin-top: -#{$i * 2}rpx;
      margin-bottom: -#{$i * 2}rpx;
      #{$v}col,
      #{$v}flex {
        padding-top: #{$i * 2}rpx;
        padding-bottom: #{$i * 2}rpx;
      }
    }
  }

  &.lr-0 {
    margin-left: 0;
    margin-right: 0;
    #{$v}col,
    #{$v}flex {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &.tb-0 {
    margin-top: 0;
    margin-bottom: 0;
    #{$v}col,
    #{$v}flex {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}
